<template>
  <view>
    <yy-paging
      v-model="dataList"
      @query="queryList"
      ref="paging"
      :auto="false"
      @scroll="scrollMe"
      :refresher-enabled="false"
    >
      <template #top>
        <u-navbar
          :is-back="false"
          :background="{ backgroundColor: isScroll ? '#00A9AB' : '#00A9AB' }"
          :border-bottom="false"
          :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
        >
          <view class="grid grid-cols-3 items-center px-3 w-full">
            <view class="flex col-span-1 items-center" @click="vk.navigateBack()">
              <image src="/static/dddr129.png" mode="aspectFill" class="size-6" />
            </view>
            <view class="line-clamp-1 flex col-span-1 justify-center">
              <view class="text-[#fff] font-bold text-base"> 达人认证 </view>
            </view>
            <view class="flex col-span-1 justify-end">
              <view class="text-[14px] text-[#5C6068]"> </view>
            </view>
          </view>
        </u-navbar>
      </template>

      <view class="relative">
        <view class="h-[17rem] absolute inset-0 -z-10">
          <image src="/static/dddr94.png" class="size-full" mode="aspectFill" />
        </view>
        <view class="flex flex-col flex-grow gap-2 px-4">
          <view class="mt-10 text-[1.5rem] text-[#FFFFFF] font-medium"> 恭喜成为钓点达人 </view>
          <view class="flex gap-1 items-center">
            <view class="bg-[#FFFFFF]/10 px-2 py-[.125rem] rounded-[.25rem] text-[.75rem] text-[#FFFFFF]"
              >可发布钓点
            </view>
            <view class="bg-[#FFFFFF]/10 px-2 py-[.125rem] rounded-[.25rem] text-[.75rem] text-[#FFFFFF]"
              >可提现收益
            </view>
          </view>
          <view class="mt-5">
            <view
              class="bg-[#FFFFFF] rounded-[1.25rem] overflow-hidden h-[20.5rem] flex justify-center items-center flex-col"
            >
              <view
                class="w-[5rem] h-[5rem] border-[.125rem] border-solid border-[#E6E7E9] rounded-full overflow-hidden"
              >
                <image
                  :src="vk.myfn.handleImageUrl(vk.vuex.get('$user.userInfo.avatar')) || '/static/dddr1.png'"
                  class="!size-full"
                  mode="aspectFill"
                />
              </view>
              <view class="text-[1.25rem] text-[#161A24] font-medium mt-3 w-[80%] text-center">
                {{ vk.vuex.get('$user.userInfo.nickname') || '用户_NVHWE' }}
              </view>
              <view class="text-[.75rem] text-[#00A9AB] mt-1">（已认证）</view>
              <view
                @click="toRelease"
                class="w-[9.375rem] h-[2.5rem] bg-[#00A9AB] mt-12 btn rounded-[1.375rem] flex justify-center items-center text-[.875rem] text-[#FFFFFF] font-medium"
              >
                去发布
              </view>
            </view>
          </view>
        </view>
      </view>
    </yy-paging>
    <!-- 发布弹框 -->
    <!-- 发布弹框 -->
    <yy-release :shows="show" @close="show = false"> </yy-release>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isScroll: false, // 是否滚动
        dataList: [], // 数据列表
        automatic: false, // 是否自动加载
        show: false // 是否显示发布弹框
      }
    },

    methods: {
      scrollMe() {},
      toRelease() {
        this.show = true
      },
      scroll(e) {
        this.isScroll = e.detail.scrollTop > 0
      },
      async queryList(page, limit) {
        this.$refs.paging.complete([''])
      }
    }
  }
</script>

<style lang="scss" scoped></style>
